<template>
    <div>

        <!-- 轮播图组件，传入首页图片信息 -->
        <swiper :fullWidth="true" :list="lunbotus"></swiper>


        <!-- 需求：两列。每列有5个相同模块（图片+底部文字），每个模块的宽度相等且能适应不同的手机屏幕。 -->
        <!-- 说明：每个模块占手机宽度的20%，图片自适应宽高50%，字体固定13px -->
        <ul class="mui-table-view mui-grid-view mui-grid-10">
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img src="/src/source/image/daohang001.png" alt="">
                    <div class="mui-media-body">京东超市</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <router-link to="/goodslist/phone">
                    <img src="/src/source/image/daohang002.png" alt="">
                    <div class="mui-media-body">数码电器</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img src="/src/source/image/daohang003.png" alt="">
                    <div class="mui-media-body">京东服饰</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img src="/src/source/image/daohang004.png" alt="">
                    <div class="mui-media-body">京东生鲜</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img src="/src/source/image/daohang005.png" alt="">
                    <div class="mui-media-body">京东到家</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img src="/src/source/image/daohang006.png" alt="">
                    <div class="mui-media-body">充值缴费</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img src="/src/source/image/daohang007.png" alt="">
                    <div class="mui-media-body">9.9元拼</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img src="/src/source/image/daohang008.png" alt="">
                    <div class="mui-media-body">领劵</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img src="/src/source/image/daohang009.png" alt="">
                    <div class="mui-media-body">赚钱</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img src="/src/source/image/daohang010.png" alt="">
                    <div class="mui-media-body">PLUS会员</div>
                </a>
            </li>
        </ul>
    </div>

</template>

<script>
    import { Toast } from 'mint-ui';
    import swiper from '../subcomponents/swiper.vue';

    export default {
        data() {
            return {
                lunbotus: []
            }
        },
        created() {
            this.getLunbotu();
        },
        methods: {
            // 获取轮播图信息
            getLunbotu() {
                var lunbotus = localStorage.getItem('lunbotus');
                if (lunbotus == '' || lunbotus == null || lunbotus == 'underfinded') {
                    console.log('http请求获取轮播图图片链接与页面连接');
                    this.$http.get('/home/api/getLunbotu').then(data => {
                        if (data.status === 200) {
                            this.lunbotus = data.body;
                            localStorage.setItem('lunbotus',JSON.stringify(this.lunbotus));
                        } else {
                            Toast('加载失败，请检查你的网络');
                        }
                    }).catch(data => {
                        Toast('加载失败，请检查你的网络');
                    })
                }else{
                    this.lunbotus = JSON.parse(localStorage.getItem('lunbotus'));
                }
            }
        },

        components: {
            swiper
        }
    }
</script>


<style lang="scss" scoped>
    ul>li {
        width: 20%;


        img {
            height: 60%;
            width: 60%;
        }

        a div {
            font-size: 13px !important;
        }
    }
</style>